css media 规则

例子

tip

当浏览器窗口的宽度为 600 像素或更小时，将 body 元素的背景颜色更改为“浅蓝色”：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

定义和使用

该@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机是横向还是纵向模式？）
解析度

使用媒体查询是向台式机、笔记本电脑、平板电脑和手机提供定制样式表（响应式网页设计）的一种流行技术。

您还可以使用媒体查询来指定某些样式仅适用于打印文档或屏幕阅读器（媒体类型：打印、屏幕或语音）。

除了媒体类型，还有媒体功能。媒体功能通过允许测试用户代理或显示设备的特定功能，为媒体查询提供更具体的细节。例如，您可以仅将样式应用于大于或小于特定宽度的那些屏幕。

CSS 语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

tip

not , only和and关键字的含义：

not： not 关键字反转整个媒体查询的含义。

only: only 关键字阻止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。它对现代浏览器没有影响。

and： and 关键字将媒体特征与媒体类型或其他媒体特征结合起来。

它们都是可选的。但是，如果您使用not或 only，您还必须指定媒体类型。

您还可以为不同的媒体设置不同的样式表，如下所示：

<link
  rel="stylesheet"
  media="screen and (min-width: 900px)"
  href="widescreen.css"
/>
<link
  rel="stylesheet"
  media="screen and (max-width: 600px)"
  href="smallscreen.css"
/>
....

媒体类型

Value	Description
all	默认。用于所有媒体类型设备
print	用于打印机
screen	用于电脑屏幕、平板电脑、智能手机等
speech	用于大声“阅读”页面的屏幕阅读器

媒体功能

Value	Description
any-hover	是否有任何可用的输入机制允许用户悬停在元素上？（在媒体查询第 4 级中添加）
any-pointer	是否有任何可用的输入机制是定点设备，如果是，其准确度如何？（在媒体查询第 4 级中添加）
aspect-ratio	视口的宽度和高度之间的比率
color	输出设备的每个颜色分量的位数
color-gamut	用户代理和输出设备支持的近似颜色范围（添加在媒体查询级别 4 中）
color-index	设备可以显示的颜色数
grid	设备是网格还是位图
height	视口高度
hover	主输入机制是否允许用户悬停在元素上？（在媒体查询第 4 级中添加）
inverted-colors	浏览器或底层操作系统是否反转颜色？（在媒体查询第 4 级中添加）
light-level	当前环境光级别（添加到媒体查询级别 4 中）
max-aspect-ratio	显示区域的宽度和高度之间的最大比率
max-color	输出设备的每个颜色分量的最大位数
max-color-index	设备可以显示的最大颜色数
max-height	显示区域的最大高度，如浏览器窗口
max-monochrome	单色（灰度）设备上每种“颜色”的最大位数
max-resolution	设备的最大分辨率，使用 dpi 或 dpcm
max-width	显示区域的最大宽度，如浏览器窗口
min-aspect-ratio	显示区域的宽度和高度之间的最小比率
min-color	输出设备的每个颜色分量的最小位数
min-color-index	设备可以显示的最小颜色数
min-height	显示区域的最小高度，如浏览器窗口
min-monochrome	单色（灰度）设备上每种“颜色”的最小位数
min-resolution	设备的最小分辨率，使用 dpi 或 dpcm
min-width	显示区域的最小宽度，如浏览器窗口
monochrome	单色（灰度）设备上每种“颜色”的位数
orientation	视口的方向（横向或纵向模式）
overflow-block	输出设备如何处理沿块轴溢出视口的内容（在媒体查询级别 4 中添加）
overflow-inline	是否可以滚动沿内联轴溢出视口的内容（在媒体查询级别 4 中添加）
pointer	主要输入机制是定点设备吗？如果是，其准确度如何？（在媒体查询第 4 级中添加）
resolution	输出设备的分辨率，使用 dpi 或 dpcm
scan	输出设备的扫描过程
scripting	脚本（如 JavaScript）可用吗？（在媒体查询第 4 级中添加）
update	输出设备修改内容外观的速度有多快（添加在媒体查询第 4 级中）
width	视口宽度

例子​

定义和使用​

CSS 语法​

媒体类型​

媒体功能​

例子

定义和使用

CSS 语法

媒体类型

媒体功能